<template>
  <div class="parkOrder">
    <el-form :inline="true" ref="formInline" :model="formInline" class="demo-form-inline">
      <el-form-item prop="parkname">
        <el-input v-model="formInline.parkname" placeholder="车位名称"></el-input>
      </el-form-item>

      <el-form-item prop="orderpay">
        <el-input v-model="formInline.orderpay" placeholder="应缴金额"></el-input>
      </el-form-item>

      <el-form-item prop="orderstatus">
        <el-select v-model="str" clearable placeholder="缴费状态">
          <el-option v-for="(item, index) in options" :key="index" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button icon="el-icon-search" type="primary" @click="onSubmit">查询</el-button>
        <el-button icon="el-icon-document-copy" type="success">全量导出</el-button>
        <el-button icon="el-icon-refresh-right" type="primary" @click="resetForm">重置</el-button>
      </el-form-item>
    </el-form>

    <el-table :data="tableData" border style="width: 100%; heigh: 800px">
      <el-table-column type="index" label="序号" width="60"> </el-table-column>

      <el-table-column prop="parkname" label="车位名称" width="180">
        <template slot-scope="scope">
          <span v-if="scope.row.parkname == null">暂无</span>
          <span v-else>{{ scope.row.parkname }}</span>
        </template>
      </el-table-column>

      <el-table-column prop="parkpay" label="车位金额">
        <template slot-scope="scope">
          <span v-if="scope.row.parkpay == null">暂无</span>
          <span v-else>{{ scope.row.parkpay }}</span>
        </template>
      </el-table-column>

      <el-table-column prop="startdate" label="开始时间">
        <template slot-scope="scope">
          <span v-if="scope.row.startdate == null">暂无</span>
          <span v-else>{{ scope.row.startdate.substring(0, 10)
            }} {{ scope.row.startdate.substring(11, 19) }}</span>
        </template>
      </el-table-column>

      <el-table-column prop="enddate" label="结束时间">
        <template slot-scope="scope">
          <span v-if="scope.row.enddate == null">暂无</span>
          <span v-else>
            {{ scope.row.enddate.substring(0, 10)
            }} {{ scope.row.enddate.substring(11, 19) }}
          </span>
        </template>
      </el-table-column>

      <el-table-column prop="orderpay" label="应缴金额">
        <template slot-scope="scope">
          <span v-if="scope.row.orderpay == null">暂无</span>
          <span v-else>{{ scope.row.orderpay }}</span>
        </template>
      </el-table-column>

      <el-table-column prop="orderstatus" label="缴费状态">
        <template v-slot="scope">
          <el-switch disabled v-model="scope.row.orderstatus" :active-value="1" :inactive-value="2">
          </el-switch>
        </template>
      </el-table-column>

      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button @click="handleInform(scope.row)" plain mini>通知缴费</el-button>
          <el-button @click="handleView(scope.row)" type="primary" plain mini>缴费详情</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage4"
      :page-sizes="[10, 50, 100, 200]" :page-size="10" layout="total, sizes, prev, pager, next, jumper"
      :total="this.obj.total">
    </el-pagination>

    <!-- 模态框 -->
    <el-dialog :title="title" :visible.sync="dialogVisible" width="60%" :before-close="handleClose" class="mtk">
      <el-form ref="forms" :model="forms" label-width="80px">
        <el-form-item label="开始时间" prop="startdate">
          <!-- <el-input :disabled="this.title == '车位订单详情'" type="daterange" v-model="forms.startdate"></el-input> -->
          <el-date-picker v-model="forms.startdate" type="date" :disabled="this.title == '车位订单详情'">
          </el-date-picker>
        </el-form-item>

        <el-form-item label="结束时间" prop="enddate">
          <!-- <el-input :disabled="this.title == '车位订单详情'" type="daterange" v-model="forms.enddate"></el-input> -->
          <el-date-picker v-model="forms.enddate" type="date" :disabled="this.title == '车位订单详情'">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="应缴金额" prop="orderpay">
          <el-input :disabled="this.title == '车位订单详情'" v-model="forms.orderpay"></el-input>
        </el-form-item>

        <el-form-item label="缴费状态" prop="orderstatus">
          <el-select v-model="str1" style="width: 730px" clearable placeholder="请选择">
            <el-option v-for="(item, index) in options" :key="index" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="通知缴费" prop="note">
          <el-input :disabled="this.title == '车位订单详情'" type="textarea" v-model="forms.note"></el-input>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false">关 闭</el-button>
        <el-button v-if="this.title == '车位订单通知'" type="primary" @click="handleNoticeConfirm">通 知</el-button>
        <el-button v-if="this.title == '车位订单通知'" type="primary" @click="resetForm2">重 置</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      ids: null,
      title: "",
      str: "",
      str1: "",
      currentPage4: 1,
      dialogVisible: false,
      formInline: {
        parkname: "",
        orderstatus: "",
        orderpay: "",
      },
      forms: {
        startdate: "",
        enddate: "",
        orderpay: "",
        // orderstatus: "",
        note: "",
      },
      obj: {
        // 页码
        page: 1,
        // 每页多少条
        rows: 10,
        // 默认选中哪一页
        currentPage: 1,
        // 定义总条数
        total: null,
        totals: null,
      },
      options: [
        {
          value: 2,
          label: "未缴费",
        },
        {
          value: 1,
          label: "已缴费",
        },
      ],
      tableData: [],
    };
  },
  methods: {
    //查询
    onSubmit() {
      this.$Axios({
        url: "/parking/getParkOrder",
        method: "get",
        data: {
          parkname: this.formInline.parkname,
          orderstatus: this.str,
          orderpay: this.formInline.orderpay,
          currPage: this.obj.page - 1,
          pageNum: this.obj.rows,
        },
        success: (result) => {
          setTimeout(() => {
            this.obj.total = result.total;
            this.tableData = result.data;
          }, 200);
        },
      });
    },
    //清空内容
    resetForm() {
      // 清空验证并清空内容
      this.$refs["formInline"].resetFields();

      this.str = null;


    },
    resetForm2() {
      // 清空验证并清空内容
      this.forms.startdate = null,
        this.forms.enddate = null,
        this.forms.orderpay = null,
        this.str1 = null,
        this.forms.note = null
    },
    //通知缴费
    handleInform(row) {
      this.dialogVisible = true;
      this.title = "车位订单通知";
      if (row.startdate) {
        (this.forms.startdate =
          row.startdate.substring(0, 10))
      }
      if (row.enddate) {
        (this.forms.enddate =
          row.enddate.substring(0, 10))
      }
      (this.forms.orderpay = row.orderpay),
        (this.str1 = row.orderstatus),
        (this.forms.note = row.note);
      this.ids = row.id
    },
    //缴费详情
    handleView(row) {
      this.dialogVisible = true;
      this.title = "车位订单详情";
      if (row.startdate) {
        (this.forms.startdate =
          row.startdate.substring(0, 10))
      }
      if (row.enddate) {
        (this.forms.enddate =
          row.enddate.substring(0, 10))
      }
      (this.forms.orderpay = row.orderpay),
        (this.str1 = row.orderstatus),
        (this.forms.note = row.note);
    },
    //通知缴费确定
    handleNoticeConfirm() {
      this.$Axios({
        url: "/parking/editParkOrder",
        method: "post",
        data: {
          u_id: this.ids,
          startdate: this.forms.startdate,
          enddate: this.forms.enddate,
          orderpay: this.forms.orderpay,
          orderstatus: this.str1,
          note: this.forms.note
        },
        success: (result) => {
          setTimeout(() => {
            this.$message({
              message: "通知成功",
              type: "success",
            });
            this.dialogVisible = false
            this.onSubmit()
          }, 200);
        },
      });
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => { });
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.obj.rows = val;
      this.onSubmit();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.obj.page = val;
      this.onSubmit();
    },
  },
  mounted() {
    this.onSubmit();
  },
};
</script>
<style lang="scss" scoped>
.parkOrder::v-deep {
  .el-form {
    .el-form-item {
      width: 20%;

      .el-form-item__content {
        width: 100%;

        .el-select {
          width: 100%;
        }

        input {
          font-size: 14px;
        }
      }

      &:last-child {
        width: 30%;

        .el-form-item__content {
          .el-button {
            width: 26%;
            font-size: 14px
          }
        }
      }
    }
  }

  .mtk {
    .el-form-item {

      .el-input,
      .el-textarea {
        width: 800px;
      }
    }
  }

  .has-gutter {
    tr {
      th {
        background: #eef1f6;
        text-align: center;
        color: #000;
        font-size: 14px;
        border-right-color: #ddd;
      }
    }
  }

  .el-table__row {
    td {
      text-align: center;
    }
  }

  .el-pagination {
    text-align: right;
    margin-top: 20px;
  }


  .ipt {
    width: 500px;
  }

  .btn {
    width: 130px;
  }
}
</style>